<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link rel="stylesheet" type="text/css" href="../admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../admin/css/admin.css" />
	</head>

	<body>
		<div class="page-content-wrap"   id="category-list">
			<div class="layui-inline" style="width: 50px">
				<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" data-id="0" name="0" data-url="../admin/categoryAdd"><i class="layui-icon">&#xe654;</i></button>
			</div>
			<div class="layui-form" >
						<table class="layui-table" lay-skin="line">
							<colgroup>
								<col >
								<col >
								<col>
								<col >
								<col>
								<col>
							</colgroup>
							<thead>
								<tr>
									<th>分类级别</th>
									<th >上级分类</th>
									<th >分类名称</th>
									<th>分类路径</th>
									<th>创建时间</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody >
								<span th:each="category:${categorys}" th:if="${category.type==0}">
									<tr  th:id="${'node-'+category.id}" th:if="${category.type==0}"  class="parent collapsed">
										<td>一级分类</td>
										<td>无</td>
										<td >
											<span th:text="${category.name}"> </span>
											<a th:if="${category.isSon}" class="layui-btn layui-btn-mini layui-btn-normal showSubBtn" th:data-id='${category.id}'>+</a>
										</td>
										<td >无</td>
										<td th:text="${#dates.format(category.createtime,'yyyy年MM月dd日HH:mm')}"></td>
										<td>
											<div class="layui-inline">
												<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs"  th:data-id="${category.id}" name="1" data-url="../admin/categoryAdd"><i class="layui-icon">&#xe654;</i></button>
												<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" th:data-id="${category.id}" name="0" data-url="../admin/categoryEdit"><i class="layui-icon">&#xe642;</i></button>
												<button th:if="${category.isSon==false}" class="layui-btn layui-btn-small layui-btn-danger del-btn" th:data-id="${category.id}"  data-url="../admin/category/delete"><i class="layui-icon">&#xe640;</i></button>
											</div>
										</td>
									</tr>
									<tr  th:each="sonCategory:${categorys}" th:if="${category.id==sonCategory.pid && sonCategory.type!=0}" th:id="${'node-'+sonCategory.id}"   style="display:none ;"  th:class="${'child-node-'+sonCategory.parentCategory.id+' collapsed'}" th:parentid="${sonCategory.parentCategory.id}">
										<td >二级分类</td>
										<td th:text="${sonCategory.parentCategory.name}"></td>
										<td th:text="${sonCategory.name}" style="padding-left: 50px"></td>
										<td th:text="${sonCategory.page}"></td>
										<td th:text="${#dates.format(sonCategory.createtime,'yyyy年MM月dd日HH:mm')}"></td>

										<td>
											<div class="layui-inline">
												<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" th:data-id="${sonCategory.id}" name="1" data-url="../admin/categoryEdit"><i class="layui-icon">&#xe642;</i></button>
												<button class="layui-btn layui-btn-small layui-btn-danger del-btn" th:data-id="${sonCategory.id}" th:if="${sonCategory.isGoods==false}" data-url="../admin/category/delete"><i class="layui-icon">&#xe640;</i></button>
											</div>
										</td>
									</tr>
								</span>

							</tbody>
						</table>
					</div>
		</div>
		<script src="../admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script>

			layui.use(['jquery'], function() {
						var $=layui.jquery;
						//栏目展示隐藏
						$('.showSubBtn').on('click', function() {
							var _this = $(this);
							var id = _this.attr('data-id');
							var parent = _this.parents('.parent');
							var child = $('.child-node-' + id);
							var childAll = $('tr[parentid=' + id + ']');
							if(parent.hasClass('collapsed')) {
								_this.html('-');
						parent.addClass('expanded').removeClass('collapsed');
						child.css('display', '');
					} else {
						_this.html('+');
						parent.addClass('collapsed').removeClass('expanded');
						child.css('display', 'none');
						childAll.addClass('collapsed').removeClass('expanded').css('display', 'none');
						childAll.find('.showSubBtn').html('+');
					}

				})
			});
		</script>
	</body>

</html>